<template>
  <div class="index">
    <div class="container">
      <div>{{ result }}</div>
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />
      <van-dropdown-menu>
        <van-dropdown-item v-model="qu" :options="quList" @change="change" />
      </van-dropdown-menu>
      <van-cell-group>
        <van-field label="机器码" v-model="form.jqm" placeholder="机器码" />
        <van-field
          v-model="form.sj"
          label="手机号"
          placeholder="请输入手机号"
          error-message="手机号格式错误"
        />
        <van-field label="todesk" v-model="form.todesk" placeholder="todesk" />
        <van-field label="角色数量" v-model="form.js" placeholder="角色数量" />
        <van-field label="跨区" v-model="form.kq" placeholder="跨区" />
        <van-field label="区服" v-model="form.qu" placeholder="区服" />
        <van-field label="实名信息" v-model="form.sm" placeholder="实名信息" />
        <van-field label="账号" v-model="form.zh" placeholder="账号" />

        <van-field name="radio" label="是否制裁">
          <template #input>
            <van-radio-group v-model="form.is_zc" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="是否购买站令">
          <template #input>
            <van-radio-group v-model="form.zl" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="模式">
          <template #input>
            <van-radio-group v-model="form.ms" direction="horizontal">
              <van-radio name="ms1">模式1</van-radio>
              <van-radio name="ms2">模式2</van-radio>
              <van-radio name="ms3">模式3</van-radio>
              <van-radio name="ms4">模式4</van-radio>
              <van-radio name="ms5">模式5</van-radio>
              <van-radio name="ms6">模式6</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
        v-if='!id&&form.is_zc=="1"'
          v-model="form.startTime"
          is-link
          readonly
          name="datePicker"
          label="开始日期"
          placeholder="点击选择时间"
          @click="
            () => {
              dateType = 'start';
              show = true;
            }
          "
        />
        <van-field
        v-if='!id&&form.is_zc=="1"'
          v-model="form.endTime"
          is-link
          readonly
          name="datePicker"
          label="结束日期"
          placeholder="点击选择时间"
          @click="
            () => {
              dateType = 'end';
              show = true;
            }
          "
        />
        <van-button type="primary" @click="submit">提交</van-button>
      </van-cell-group>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-date-picker
          v-if="dataType == 'start'"
          v-model="startDate"
          title="选择年月"
          @confirm="confirmDate"
        />
        <van-date-picker
          v-else
          v-model="endDate"
          title="选择年月"
          @confirm="confirmDate"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useAxios } from "@/hooks/useAxios";
import { showConfirmDialog } from "vant";
import { showToast } from "vant";
//123
const startDate = ref([new Date().getFullYear(), new Date().getMonth() + 1,new Date().getDate()]);
const endDate = ref([new Date().getFullYear(), new Date().getMonth() + 1,new Date().getDate()]);
const show = ref(false);
const dateType = ref("start");
const form = ref({
  jqm: "",
  qu: "",
  sj: "",
  zh: "",
  todesk: "",
  js: "",
  sm: "",
  kq: "",
  zl: "0",
  endTime: "",
  startTime: "",
  is_zc: "0",
  ms:"ms4"
});
const qu = ref("广东1区");
const quList = ref([
  {
    value: "广东1区",
    text: "广东1区",
    kq: "跨一",
  },
  {
    value: "广东2区",
    text: "广东2区",
    kq: "跨一",
  },
  {
    value: "广东3区",
    text: "广东3区",
    kq: "跨一",
  },
  {
    value: "广东4区",
    text: "广东4区",
    kq: "跨一",
  },
  {
    value: "广东5区",
    text: "广东5区",
    kq: "跨一",
  },
  {
    value: "广东6区",
    text: "广东6区",
    kq: "跨一",
  },
  {
    value: "广东7区",
    text: "广东7区",
    kq: "跨一",
  },
  {
    value: "广东8区",
    text: "广东8区",
    kq: "跨一",
  },
  {
    value: "广东9区",
    text: "广东9区",
    kq: "跨一",
  },
  {
    value: "广东10区",
    text: "广东10区",
    kq: "跨一",
  },
  {
    value: "广东11区",
    text: "广东11区",
    kq: "跨一",
  },
  {
    value: "广东12区",
    text: "广东12区",
    kq: "跨一",
  },
  {
    value: "广州1/2区",
    text: "广州1/2区",
    kq: "跨一",
  },
  {
    value: "广西1区",
    text: "广西1区",
    kq: "跨一",
  },
  {
    value: "广西2/4区",
    text: "广西2/4区",
    kq: "跨一",
  },
  {
    value: "广西3区",
    text: "广西3区",
    kq: "跨一",
  },
  {
    value: "广西5区",
    text: "广西5区",
    kq: "跨一",
  },
  {
    value: "湖北1区",
    text: "湖北1区",
    kq: "跨二",
  },
  {
    value: "湖北2区",
    text: "湖北2区",
    kq: "跨二",
  },
  {
    value: "湖北3区",
    text: "湖北3区",
    kq: "跨二",
  },
  {
    value: "湖北4区",
    text: "湖北4区",
    kq: "跨二",
  },
  {
    value: "湖北5区",
    text: "湖北5区",
    kq: "跨二",
  },
  {
    value: "湖北6区",
    text: "湖北6区",
    kq: "跨二",
  },
  {
    value: "湖北7区",
    text: "湖北7区",
    kq: "跨二",
  },
  {
    value: "湖北8区",
    text: "湖北8区",
    kq: "跨二",
  },
  {
    value: "湖南1区",
    text: "湖南1区",
    kq: "跨二",
  },
  {
    value: "湖南2区",
    text: "湖南2区",
    kq: "跨二",
  },
  {
    value: "湖南3区",
    text: "湖南3区",
    kq: "跨二",
  },
  {
    value: "湖南4区",
    text: "湖南4区",
    kq: "跨二",
  },
  {
    value: "湖南5区",
    text: "湖南5区",
    kq: "跨二",
  },
  {
    value: "湖南6区",
    text: "湖南6区",
    kq: "跨二",
  },
  {
    value: "湖南7区",
    text: "湖南7区",
    kq: "跨二",
  },
  {
    value: "四川1区",
    text: "四川1区",
    kq: "跨三A区",
  },
  {
    value: "四川2区",
    text: "四川2区",
    kq: "跨三A区",
  },
  {
    value: "四川3区",
    text: "四川3区",
    kq: "跨三A区",
  },
  {
    value: "四川4区",
    text: "四川4区",
    kq: "跨三A区",
  },
  {
    value: "四川5区",
    text: "四川5区",
    kq: "跨三A区",
  },
  {
    value: "四川6区",
    text: "四川6区",
    kq: "跨三A区",
  },
  {
    value: "西北1区",
    text: "西北1区",
    kq: "跨三A区",
  },
  {
    value: "西北2/3区",
    text: "西北2/3区",
    kq: "跨三A区",
  },
  {
    value: "新疆1区",
    text: "新疆1区",
    kq: "跨三A区",
  },
  {
    value: "陕西1区",
    text: "陕西1区",
    kq: "跨三B区",
  },
  {
    value: "陕西2/3区",
    text: "陕西2/3区",
    kq: "跨三B区",
  },
  {
    value: "云南1区",
    text: "云南1区",
    kq: "跨三B区",
  },
  {
    value: "贵州1区",
    text: "贵州1区",
    kq: "跨三B区",
  },
  {
    value: "西南1区",
    text: "西南1区",
    kq: "跨三B区",
  },
  {
    value: "西南2区",
    text: "西南2区",
    kq: "跨三B区",
  },
  {
    value: "西南3区",
    text: "西南3区",
    kq: "跨三B区",
  },
  {
    value: "重庆1区",
    text: "重庆1区",
    kq: "跨三B区",
  },
  {
    value: "重庆2区",
    text: "重庆2区",
    kq: "跨三B区",
  },
  {
    value: "云贵1区",
    text: "云贵1区",
    kq: "跨三B区",
  },
  {
    value: "上海4/5区",
    text: "上海4/5区",
    kq: "跨四",
  },
  {
    value: "江苏5/7区",
    text: "江苏5/7区",
    kq: "跨四",
  },
  {
    value: "江苏6区",
    text: "江苏6区",
    kq: "跨四",
  },
  {
    value: "江苏8区",
    text: "江苏8区",
    kq: "跨四",
  },
  {
    value: "浙江4/5区",
    text: "浙江4/5区",
    kq: "跨四",
  },
  {
    value: "浙江6区",
    text: "浙江6区",
    kq: "跨四",
  },
  {
    value: "浙江7区",
    text: "浙江7区",
    kq: "跨四",
  },
  {
    value: "福建3/4区",
    text: "福建3/4区",
    kq: "跨四",
  },
  {
    value: "江西3区",
    text: "江西3区",
    kq: "跨四",
  },
  {
    value: "安徽3区",
    text: "安徽3区",
    kq: "跨四",
  },
  {
    value: "上海1区",
    text: "上海1区",
    kq: "跨五",
  },
  {
    value: "上海2区",
    text: "上海2区",
    kq: "跨五",
  },
  {
    value: "上海3区",
    text: "上海3区",
    kq: "跨五",
  },
  {
    value: "江苏1区",
    text: "江苏1区",
    kq: "跨五",
  },
  {
    value: "江苏2区",
    text: "江苏2区",
    kq: "跨五",
  },
  {
    value: "江苏3区",
    text: "江苏3区",
    kq: "跨五",
  },
  {
    value: "江苏4区",
    text: "江苏4区",
    kq: "跨五",
  },
  {
    value: "浙江1区",
    text: "浙江1区",
    kq: "跨五",
  },
  {
    value: "浙江2区",
    text: "浙江2区",
    kq: "跨五",
  },
  {
    value: "浙江3区",
    text: "浙江3区",
    kq: "跨五",
  },
  {
    value: "福建1区",
    text: "福建1区",
    kq: "跨五",
  },
  {
    value: "福建2区",
    text: "福建2区",
    kq: "跨五",
  },
  {
    value: "江西1区",
    text: "江西1区",
    kq: "跨五",
  },
  {
    value: "江西2区",
    text: "江西2区",
    kq: "跨五",
  },
  {
    value: "安徽1区",
    text: "安徽1区",
    kq: "跨五",
  },
  {
    value: "安徽2区",
    text: "安徽2区",
    kq: "跨五",
  },
  {
    value: "北京1区",
    text: "北京1区",
    kq: "跨六",
  },
  {
    value: "北京2/4区",
    text: "北京2/4区",
    kq: "跨六",
  },
  {
    value: "华北1区",
    text: "华北1区",
    kq: "跨六",
  },
  {
    value: "华北2区",
    text: "华北2区",
    kq: "跨六",
  },
  {
    value: "华北3区",
    text: "华北3区",
    kq: "跨六",
  },
  {
    value: "东北1区",
    text: "东北1区",
    kq: "跨六",
  },
  {
    value: "东北2区",
    text: "东北2区",
    kq: "跨六",
  },
  {
    value: "东北3/7区",
    text: "东北3/7区",
    kq: "跨六",
  },
  {
    value: "辽宁1区",
    text: "辽宁1区",
    kq: "跨六",
  },
  {
    value: "西北1区",
    text: "西北1区",
    kq: "跨六",
  },
  {
    value: "山东1区",
    text: "山东1区",
    kq: "跨六",
  },
  {
    value: "山东2/7区",
    text: "山东2/7区",
    kq: "跨六",
  },
  {
    value: "河北1区",
    text: "河北1区",
    kq: "跨六",
  },
  {
    value: "河南1区",
    text: "河南1区",
    kq: "跨六",
  },
  {
    value: "河南2区",
    text: "河南2区",
    kq: "跨六",
  },
  {
    value: "黑龙江1区",
    text: "黑龙江1区",
    kq: "跨六",
  },
  {
    value: "吉林1/2区",
    text: "吉林1/2区",
    kq: "跨六",
  },
  {
    value: "辽宁2区",
    text: "辽宁2区",
    kq: "跨七A区",
  },
  {
    value: "辽宁3区",
    text: "辽宁3区",
    kq: "跨七A区",
  },
  {
    value: "东北4/5/6区",
    text: "东北4/5/6区",
    kq: "跨七A区",
  },
  {
    value: "河北2/3区",
    text: "河北2/3区",
    kq: "跨七A区",
  },
  {
    value: "河北4区",
    text: "河北4区",
    kq: "跨七A区",
  },
  {
    value: "河北5区",
    text: "河北5区",
    kq: "跨七A区",
  },
  {
    value: "河南3区",
    text: "河南3区",
    kq: "跨七B区",
  },
  {
    value: "河南4区",
    text: "河南4区",
    kq: "跨七B区",
  },
  {
    value: "河南5区",
    text: "河南5区",
    kq: "跨七B区",
  },
  {
    value: "河南6区",
    text: "河南6区",
    kq: "跨七B区",
  },
  {
    value: "河南7区",
    text: "河南7区",
    kq: "跨七B区",
  },
  {
    value: "山西2区",
    text: "山西2区",
    kq: "跨八",
  },
  {
    value: "黑龙江2/3区",
    text: "黑龙江2/3区",
    kq: "跨八",
  },
  {
    value: "北京3区",
    text: "北京3区",
    kq: "跨八",
  },
  {
    value: "天津1区",
    text: "天津1区",
    kq: "跨八",
  },
  {
    value: "内蒙古1区",
    text: "内蒙古1区",
    kq: "跨八",
  },
  {
    value: "华北4区",
    text: "华北4区",
    kq: "跨八",
  },
  {
    value: "山东3区",
    text: "山东3区",
    kq: "跨八",
  },
  {
    value: "山东4区",
    text: "山东4区",
    kq: "跨八",
  },
  {
    value: "山东5区",
    text: "山东5区",
    kq: "跨八",
  },
  {
    value: "山东6区",
    text: "山东6区",
    kq: "跨八",
  },
]);
let isUpdate = false;
let id = "";
const searchValue = ref("");
const result = ref("");
const handleStart = () => {
  console.log(1);
};
const submit = async () => {
  if(form.value.is_zc==='1'&&!id){
    if(form.value.startTime&&form.value.endTime){
      console.log('1');
      
    }else{
      showToast('请选择时间')
      return
    }
  }
  if (isUpdate) {
    useAxios.post("/updateJq/" + id, form.value).then((res) => {
      result.value = res;
    });
  } else {
    useAxios.post("/createJq", form.value).then((res) => {
      result.value = res;
    });
  }
};
const confirmDate = (value) => {
  if (dateType.value == "start") {
    form.value.startTime =
      value.selectedValues[0] + "-" + value.selectedValues[1]+'-'+value.selectedValues[2];
  } else {
    form.value.endTime =
      value.selectedValues[0] + "-" + value.selectedValues[1]+'-'+value.selectedValues[2];
  }
  show.value = false;
  console.log(form);
};
const change = (e, a) => {
  quList.value.forEach((item) => {
    if (item.value == e) {
      form.value.kq = item.kq;
      form.value.qu = e;
    }
  });
};
const onSearch = (value) => {
  quList.value = quList.value.filter((item) => item.value.includes(value));
};
onMounted(() => {
  let param = new URLSearchParams("?" + window.location.hash.split("?")[1]);
  id = param.get("id");
  console.log(id);

  if (id) {
    isUpdate = true;
    useAxios.get("/findDetailJq/" + id).then((res) => {
      form.value = res.data[0];
      form.value.ms = res.data[0].ms.ms
    });
  }
});
</script>

<style lang="less" scope></style>
